<template>
	<div class="auth-page">
		<!-- PC端背景图片 -->
		<div class="auth-bg-image">
			<img
				src="../assets/PC.jpg"
				alt="Background"
			/>
		</div>
		<!-- 返回首页按钮 -->
		<button
			@click="goToHome"
			class="auth-back-btn"
			aria-label="返回首页"
		>
			<span class="auth-back-icon">←</span>
			<span class="auth-back-text">返回首页</span>
		</button>

		<!-- 主要内容区域 -->
		<main class="auth-main">
			<div class="auth-container">
				<!-- 品牌标识 -->
				<div class="auth-brand">
					<h1 class="auth-brand-title">欢迎来到AIchat</h1>
				</div>

				<!-- 认证卡片 -->
				<div class="auth-card">
					<!-- 选项卡导航 -->
					<div class="auth-tabs">
						<button
							:class="['auth-tab', { 'auth-tab--active': activeTab === 'login' }]"
							@click="switchTab('login')"
						>
							登录
						</button>
						<button
							:class="['auth-tab', { 'auth-tab--active': activeTab === 'register' }]"
							@click="switchTab('register')"
						>
							注册
						</button>
					</div>

					<!-- 表单内容 -->
					<div class="auth-form-container">
						<!-- 登录表单 -->
						<form v-if="activeTab === 'login'" @submit.prevent="handleLogin" class="auth-form">
							<!-- 用户名输入框 -->
							<div class="auth-form-group">
								<label for="username" class="auth-label">用户名或邮箱</label>
								<div class="auth-input-container">
									<input
										id="username"
										type="text"
										v-model="loginData.username"
										class="auth-input"
										placeholder="请输入用户名或邮箱"
										required
									/>
								</div>
							</div>

							<!-- 密码输入框 -->
							<div class="auth-form-group">
								<label for="password" class="auth-label">密码</label>
								<div class="auth-input-container">
									<input
										id="password"
										:type="passwordVisible ? 'text' : 'password'"
										v-model="loginData.password"
										class="auth-input"
										placeholder="请输入密码"
										required
									/>
									<button
										type="button"
										@click="togglePassword"
										class="auth-password-toggle"
									>
										<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
											<path v-if="!passwordVisible" d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
											<circle v-if="!passwordVisible" cx="12" cy="12" r="3"/>
											<path v-if="passwordVisible" d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
											<line v-if="passwordVisible" x1="1" y1="1" x2="23" y2="23"/>
										</svg>
									</button>
								</div>
							</div>

							<!-- 记住我复选框 -->
							<div class="auth-form-group">
								<label class="auth-checkbox">
									<input
										type="checkbox"
										v-model="loginData.remember"
									/>
									<span class="auth-checkbox-text">记住我</span>
								</label>
							</div>

							<!-- 忘记密码链接 -->
							<div class="auth-options">
								<div></div>
								<a href="#" class="auth-link">忘记密码？</a>
							</div>

							<!-- 登录按钮 -->
							<button
								type="submit"
								:disabled="loginLoading"
								class="auth-submit-btn"
							>
								<span v-if="loginLoading" class="auth-loading"></span>
								{{ loginLoading ? '登录中...' : '登录' }}
							</button>
						</form>

						<!-- 注册表单 -->
						<form v-if="activeTab === 'register'" @submit.prevent="handleRegister" class="auth-form">
							<!-- 用户名输入框 -->
							<div class="auth-form-group">
								<label for="reg-username" class="auth-label">用户名</label>
								<div class="auth-input-container">
									<input
										id="reg-username"
										type="text"
										v-model="registerData.username"
										class="auth-input"
										placeholder="请输入用户名"
										required
									/>
								</div>
							</div>

							<!-- 密码输入框 -->
							<div class="auth-form-group">
								<label for="reg-password" class="auth-label">密码</label>
								<div class="auth-input-container">
									<input
										id="reg-password"
										:type="passwordVisible ? 'text' : 'password'"
										v-model="registerData.password"
										class="auth-input"
										placeholder="至少6个字符"
										required
									/>
									<button
										type="button"
										@click="togglePassword"
										class="auth-password-toggle"
									>
										<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
											<path v-if="!passwordVisible" d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
											<circle v-if="!passwordVisible" cx="12" cy="12" r="3"/>
											<path v-if="passwordVisible" d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
											<line v-if="passwordVisible" x1="1" y1="1" x2="23" y2="23"/>
										</svg>
									</button>
								</div>
							</div>

							<!-- 确认密码输入框 -->
							<div class="auth-form-group">
								<label for="confirm-password" class="auth-label">确认密码</label>
								<div class="auth-input-container">
									<input
										id="confirm-password"
										:type="passwordVisible ? 'text' : 'password'"
										v-model="registerData.confirmPassword"
										class="auth-input"
										placeholder="请再次输入密码"
										required
									/>
								</div>
							</div>

							<!-- 用户协议复选框 -->
							<div class="auth-form-group">
								<label class="auth-checkbox">
									<input
										type="checkbox"
										v-model="registerData.agreement"
										required
									/>
									<span class="auth-checkbox-text">我同意<a href="#" class="auth-link">服务条款</a>和<a href="#" class="auth-link">隐私政策</a></span>
								</label>
							</div>

							<!-- 注册按钮 -->
							<button
								type="submit"
								:disabled="registerLoading"
								class="auth-submit-btn"
							>
								<span v-if="registerLoading" class="auth-loading"></span>
								{{ registerLoading ? '注册中...' : '注册' }}
							</button>
						</form>
					</div>
				</div>
			</div>
		</main>
	</div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { useAuthStore } from '@/stores/auth'

// 路由和状态管理
const router = useRouter()
const authStore = useAuthStore()

// 响应式数据
const activeTab = ref('login')
const passwordVisible = ref(false)
const loginLoading = computed(() => authStore.loginLoading)
const registerLoading = computed(() => authStore.registerLoading)

// 登录表单数据
const loginData = reactive({
	username: '',
	password: '',
	remember: false
})

// 注册表单数据
const registerData = reactive({
	username: '',
	password: '',
	confirmPassword: '',
	agreement: false
})

// 初始化时从localStorage读取记住的用户名
onMounted(() => {
	const rememberedUsername = localStorage.getItem('rememberedUsername')
	if (rememberedUsername) {
		loginData.username = rememberedUsername
		loginData.remember = true
	}
})

// 返回首页
const goToHome = () => {
	router.push('/')
}

// 选项卡切换
const switchTab = (tab) => {
	activeTab.value = tab
	// 切换时重置密码可见性
	passwordVisible.value = false
}

// 切换密码可见性
const togglePassword = () => {
	passwordVisible.value = !passwordVisible.value
}

// 处理登录
const handleLogin = async () => {
	try {
		// 调用登录API
		const result = await authStore.login(loginData)

		if (result.success) {
			message.success('登录成功！')

			// 如果勾选了"记住我"，保存登录信息到localStorage
			if (loginData.remember) {
				localStorage.setItem('rememberedUsername', loginData.username)
			} else {
				localStorage.removeItem('rememberedUsername')
			}

			// 跳转到主页或返回之前的页面
			const redirect = router.currentRoute.value.query.redirect || '/'
			router.push(redirect)
		} else {
			message.error(result.error || '登录失败，请检查用户名和密码')
		}
	} catch (error) {
		console.error('登录失败:', error)
		message.error('登录失败，请稍后重试')
	}
}

// 处理注册
const handleRegister = async () => {
	// 简单的前端验证
	if (registerData.password !== registerData.confirmPassword) {
		message.error('两次输入的密码不一致')
		return
	}

	if (registerData.password.length < 6) {
		message.error('密码至少6个字符')
		return
	}

	if (!registerData.agreement) {
		message.error('请阅读并同意用户协议')
		return
	}

	try {
		// 调用注册API
		const result = await authStore.register({
			username: registerData.username,
			password: registerData.password,
			confirmPassword: registerData.confirmPassword
		})

		if (result.success) {
			message.success('注册成功！请登录您的账户')
			// 注册成功后切换到登录选项卡
			activeTab.value = 'login'
			// 清空注册表单
			registerData.username = ''
			registerData.password = ''
			registerData.confirmPassword = ''
			registerData.agreement = false
		} else {
			message.error(result.error || '注册失败，请稍后重试')
		}
	} catch (error) {
		console.error('注册失败:', error)
		message.error('注册失败，请稍后重试')
	}
}
</script>

<style lang="scss" scoped>
// ===========================
// CSS变量定义
// ===========================
:root {
	--auth-primary: #6366f1;
	--auth-primary-dark: #4f46e5;
	--auth-primary-light: #818cf8;
	--auth-secondary: #ec4899;
	--auth-glass-bg: rgba(255, 255, 255, 0.05);
	--auth-glass-border: rgba(255, 255, 255, 0.1);
	--auth-glass-hover: rgba(255, 255, 255, 0.1);
	--auth-text-primary: rgba(255, 255, 255, 0.95);
	--auth-text-secondary: rgba(255, 255, 255, 0.75);
	--auth-text-muted: rgba(255, 255, 255, 0.5);
	--auth-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--auth-radius: 16px;
	--auth-radius-lg: 24px;
}

// ===========================
// 背景样式
// ===========================
.auth-bg-image {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	overflow: hidden;

	// PC端显示背景图片
	@media (min-width: 769px) {
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

	// 移动端隐藏图片
	@media (max-width: 768px) {
		img {
			display: none;
		}
	}
}

// ===========================
// 页面布局
// ===========================
.auth-page {
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	position: relative;
	background: transparent;
}

.auth-main {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	max-width: 1400px;
	z-index: 1;
	position: relative;
	padding-right: 5%;

	// 移动端居中显示
	@media (max-width: 768px) {
		justify-content: center;
		padding-right: 0;
	}
}

.auth-container {
	width: 100%;
	max-width: 450px;
	display: flex;
	flex-direction: column;
}

// ===========================
// 品牌标识
// ===========================
.auth-brand {
	text-align: center;
	margin-bottom: 1.5rem;
}

.auth-brand-title {
	font-size: 1.8rem;
	font-weight: 700;
	margin: 0;
	background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: 0.4px;
}

// ===========================
// 认证卡片
// ===========================
.auth-card {
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 2rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	position: relative;
	overflow: hidden;

	// 顶部光泽效果
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	}
}

// ===========================
// 选项卡导航
// ===========================
.auth-tabs {
	display: flex;
	margin-bottom: 1.2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	background: transparent;
	padding: 0;
}

.auth-tab {
	flex: 1;
	padding: 0.8rem 1.2rem;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	letter-spacing: 0.2px;
	border-bottom: 2px solid transparent;

	&--active {
		color: #c084fc;
		border-bottom-color: #c084fc;
	}

	&:hover:not(.auth-tab--active) {
		color: rgba(255, 255, 255, 0.8);
	}
}

// ===========================
// 表单容器
// ===========================
.auth-form-container {
	// 基础布局和尺寸
	min-height: 200px;
	padding: 1.8rem 1.5rem;
	border-radius: 16px;
	position: relative;

	// 毛玻璃背景效果
	background: linear-gradient(
		145deg,
		rgba(255, 255, 255, 0.08) 0%,
		rgba(255, 255, 255, 0.03) 100%
	);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);

	// 边框和阴影
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);

	// 渐变边框效果
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 16px;
		padding: 1px;
		background: linear-gradient(
			135deg,
			rgba(192, 132, 252, 0.3) 0%,
			rgba(168, 85, 247, 0.1) 50%,
			rgba(255, 255, 255, 0.1) 100%
		);
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: exclude;
		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		mask-composite: exclude;
		z-index: -1;
	}

	// 光泽效果
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 50%;
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.06) 0%,
			transparent 100%
		);
		border-radius: 16px 16px 0 0;
		pointer-events: none;
		z-index: 1;
	}

	// 表单内容层级
	> * {
		position: relative;
		z-index: 2;
	}
}

// ===========================
// 返回按钮
// ===========================
.auth-back-btn {
	position: fixed;
	top: 1.5rem;
	left: 1.5rem;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	padding: 0.5rem 0.75rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--auth-transition);
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15);

	&:focus {
		outline: none;
		box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
	}
}

.auth-back-icon {
	font-size: 1.125rem;
	font-weight: bold;
	transition: var(--auth-transition);
}

.auth-back-text {
	white-space: nowrap;
}

// ===========================
// 表单样式
// ===========================
.auth-form {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.auth-form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.auth-label {
	font-size: 0.9rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	letter-spacing: 0.25px;
}

// 输入框样式
.auth-input-container {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	&:focus-within {
		border-color: #c084fc;
		background: rgba(255, 255, 255, 0.08);
		box-shadow: 0 0 0 4px rgba(192, 132, 252, 0.15);
	}
}

.auth-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	padding: 12px 16px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.95);
	font-family: inherit;
	font-weight: 500;

	&::placeholder {
		color: rgba(255, 255, 255, 0.45);
		font-weight: 400;
	}
}

.auth-password-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.5);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	&:focus {
		outline: none;
		color: #c084fc;
	}
}

// 复选框样式
.auth-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);

	input[type="checkbox"] {
		appearance: none;
		width: 16px;
		height: 16px;
		border: 2px solid rgba(255, 255, 255, 0.15);
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.05);
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		&:checked {
			background: #c084fc;
			border-color: #c084fc;
			position: relative;

			&::after {
				content: '✓';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: white;
				font-size: 10px;
				font-weight: bold;
			}
		}
	}
}

.auth-checkbox-text {
	user-select: none;
}

// 选项区域
.auth-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0.3rem 0;
}

.auth-link {
	color: #6366F1;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	&:hover {
		color: #818CF8;
	}
}

// 提交按钮
.auth-submit-btn {
	width: 100%;
	height: 48px;
	background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
	border: none;
	border-radius: 14px;
	color: white;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.8rem;

	&:disabled {
		opacity: 0.7;
		cursor: not-allowed;
	}

	&:focus {
		outline: none;
		box-shadow: 0 0 0 4px rgba(192, 132, 252, 0.2);
	}
}

.auth-loading {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top: 2px solid white;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

// ===========================
// 响应式设计
// ===========================
@media (max-width: 768px) {
	.auth-page {
		padding: 1rem;
		min-height: 100vh;
		display: flex;
		align-items: stretch;
	}

	.auth-main {
		display: flex;
		align-items: stretch;
		width: 100%;
	}

	.auth-container {
		max-width: 400px;
		min-width: 340px;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(100vh - 2rem);
	}

	.auth-brand {
		margin-bottom: 1.2rem;
	}

	.auth-brand-title {
		font-size: 1.6rem;
	}

	.auth-card {
		padding: 1.8rem 1.5rem;
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.15);
		border: 1px solid rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
	}

	.auth-form-container {
		// 移动端布局调整
		padding: 1.5rem 1.2rem;
		border-radius: 14px;
		min-height: 180px;

		// 移动端毛玻璃效果优化
		background: linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.12) 0%,
			rgba(255, 255, 255, 0.06) 100%
		);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);

		// 移动端边框和阴影
		border: 1px solid rgba(255, 255, 255, 0.15);
		box-shadow:
			0 6px 24px rgba(0, 0, 0, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.15),
			inset 0 -1px 0 rgba(0, 0, 0, 0.08);

		// 移动端渐变边框调整
		&::before {
			border-radius: 14px;
			background: linear-gradient(
				135deg,
				rgba(192, 132, 252, 0.4) 0%,
				rgba(168, 85, 247, 0.15) 50%,
				rgba(255, 255, 255, 0.15) 100%
			);
		}

		// 移动端光泽效果
		&::after {
			border-radius: 14px 14px 0 0;
			background: linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.08) 0%,
				transparent 100%
			);
		}
	}

	.auth-tabs {
		margin-bottom: 1.2rem;
	}

	.auth-tab {
		padding: 0.8rem 1rem;
		font-size: 0.9rem;
	}

	.auth-back-btn {
		top: 1rem;
		left: 1rem;
		padding: 0.6rem 0.8rem;
		font-size: 0.8rem;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.15);
		border: 1px solid rgba(255, 255, 255, 0.25);
	}

	.auth-form {
		gap: 1rem;
	}

	.auth-input {
		font-size: 16px; // 防止iOS放大
	}

	.auth-submit-btn {
		height: 44px;
		font-size: 0.95rem;
	}
}

// 小屏幕手机优化 (460px以下)
@media (max-width: 460px) {
	.auth-page {
		padding: 0.8rem;
	}

	.auth-container {
		max-width: 300px;
		min-width: 280px;
		min-height: calc(100vh - 1.6rem);
	}

	.auth-brand {
		margin-bottom: 1rem;
	}

	.auth-brand-title {
		font-size: 1.4rem;
	}

	.auth-card {
		padding: 1.5rem 1.2rem;
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.18);
		border: 1px solid rgba(255, 255, 255, 0.3);
	}

	.auth-form-container {
		// 小屏幕布局调整
		padding: 1.3rem 1rem;
		border-radius: 12px;
		min-height: 160px;

		// 小屏幕毛玻璃效果
		background: linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.15) 0%,
			rgba(255, 255, 255, 0.08) 100%
		);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);

		// 小屏幕边框和阴影
		border: 1px solid rgba(255, 255, 255, 0.18);
		box-shadow:
			0 4px 20px rgba(0, 0, 0, 0.25),
			inset 0 1px 0 rgba(255, 255, 255, 0.2),
			inset 0 -1px 0 rgba(0, 0, 0, 0.1);

		// 小屏幕渐变边框
		&::before {
			border-radius: 12px;
			background: linear-gradient(
				135deg,
				rgba(192, 132, 252, 0.5) 0%,
				rgba(168, 85, 247, 0.2) 50%,
				rgba(255, 255, 255, 0.2) 100%
			);
		}

		// 小屏幕光泽效果
		&::after {
			border-radius: 12px 12px 0 0;
			background: linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.1) 0%,
				transparent 100%
			);
		}
	}

	.auth-tabs {
		margin-bottom: 1rem;
	}

	.auth-tab {
		padding: 0.7rem 0.8rem;
		font-size: 0.85rem;
	}

	.auth-back-btn {
		padding: 0.5rem 0.6rem;
		font-size: 0.75rem;
		border-radius: 8px;

		.auth-back-text {
			display: none;
		}
	}

	.auth-input {
		padding: 10px 14px;
		font-size: 15px;
	}

	.auth-submit-btn {
		font-size: 0.9rem;
	}

	.auth-checkbox {
		font-size: 0.8rem;
	}
}

// ===========================
// 动画优化
// ===========================
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

// ===========================
// 触摸设备优化
// ===========================
@media (hover: none) {
	.auth-card:hover,
	.auth-back-btn:hover,
	.auth-social-btn:hover {
		transform: none;
	}
}
</style>